<template>
  <li>
    <div :class="['li-c', isSelect ? 'bg' : '']" @click="onSelectLayer">
      <div class="li-lt">
        <span
          :class="[
            'select',
            status == '1' ? 'tree-checkbox-checked' : '',
            status == '2' ? 'tree-checkbox-indeterminate' : '',
          ]"
          @click="onSelect"
        ></span>
        <span
          class="name"
          :style="{ color: status != '' || isSelect ? '#fff' : '' }"
        ><img v-if="treeObj.icon" :src="treeObj.icon" /><a-tooltip placement="right">
          <template slot="title">
            <span>{{ treeObj.title }}</span>
          </template>
          <em>{{ treeObj.title }}</em> </a-tooltip
        ><i
          v-if="treeObj.name == 'user' && treeObj.onlineFlag != null && treeObj.onlineFlag"
          class="on-line"
        >【在线】<b class="tracking" @click="getTracking"></b></i
        ></span>
      </div>
      <span class="num" v-if="treeObj.children">
        <i
          v-if="treeObj.name == 'user'"
        >{{ treeObj.key != '0' ? treeObj.onlineCount + '/' : '' }}{{ treeObj.allCount }}</i
        >
        <i v-else>{{ treeObj.num || treeObj.count }}</i>
        <a-icon
          @click="onExpand(treeObj)"
          :class="['icon', expandKeys.indexOf(treeObj.key) >= 0 ? 'down' : '']"
          type="caret-down"
        />
      </span>
    </div>
    <ul v-if="treeObj.children && expandKeys.indexOf(treeObj.key) >= 0">
      <tree-li
        :ref="`children${item.key}`"
        :key="item.key"
        :treeObj="item"
        :parent="treeObj.key"
        :selectKeys="selectKeys"
        v-for="item in treeObj.children"
      />
    </ul>
  </li>
</template>
<script>
  import treeLi from './treeLi.vue'
  import {mapState} from 'vuex'

  export default {
  components: {
    treeLi
  },
  name: 'TreeLi',
  props: {
    treeObj: {
      type: Object,
      default: () => {}
    },
    selectKeys: {
      type: Array,
      default: () => []
    },
    parent: {
      type: [Number, String],
      default: ''
    }
  },
  data() {
    return {
      checkStatus: '0',
      allChildKeys: [], // 所有的底层元素key值
      expandKeys: [],
      status: '', // checkbox 状态
      isSelect: false // 是否文字被选中
    }
  },
  watch: {
    selectKeys(newData) {
      this.selectKeysDo(newData)
    },
    selectLayerKey(newData) {
      if (this.treeObj.key == newData) {
        this.isSelect = true
      } else {
        this.isSelect = false
      }
    },
    treeObj(newData) {
      this.allChildKeys = []
      this.checkKeys(newData)
      this.selectKeysDo(this.selectKeys)
    }
  },
  computed: {
    ...mapState(['selectLayerKey'])
  },
  mounted() {
    this.checkKeys(this.treeObj)
    this.selectKeysDo(this.selectKeys)
  },
  methods: {
    selectKeysDo(newData) {
      let keyLength = 0
      this.allChildKeys.map((item) => {
        if (newData.filter((items) => items.key == item.key).length > 0) {
          keyLength += 1
        }
      })
      if (keyLength == this.allChildKeys.length && this.allChildKeys.length != 0) {
        this.status = '1'
      } else if (keyLength > 0 && keyLength < this.allChildKeys.length) {
        this.status = '2'
      } else {
        this.status = ''
      }
    },
    checkKeys(obj) {
      if (obj.children && obj.children.length > 0) {
        obj.children.map((item) => {
          this.checkKeys(item)
        })
      } else if (obj.children == null) {
        this.allChildKeys.push(obj)
      }
    },
    // 勾选框
    onSelect(event) {
      event.stopPropagation()
      // 所有的资源组都会变选择
      if (this.status != '1') {
        this.$parent.parentSelect(['select', this.allChildKeys])
      } else {
        this.$parent.parentSelect(['no-select', this.allChildKeys])
      }
    },
    parentSelect(val) {
      if (this.$parent.parentSelect) {
        this.$parent.parentSelect(val)
      }
    },
    // 点击节点
    onSelectLayer(event) {
      event.stopPropagation()
      // 点击最底层数据
      if (!this.treeObj.children) {
        this.$parent.parentLayer(this.treeObj)
      }
    },
    parentLayer(val) {
      if (this.$parent.parentLayer) {
        this.$parent.parentLayer(val)
      }
    },
    onExpand(obj) {
      const _index = this.expandKeys.indexOf(obj.key)
      if (_index >= 0) {
        this.expandKeys.splice(_index, 1)
      } else {
        this.expandKeys.push(obj.key)
      }
    },
    // 跟踪定位
    getTracking(event) {
      event.stopPropagation()
      if (!this.treeObj.children) {
        this.$parent.getLocation(this.treeObj)
      }
    },
    getLocation(val) {
      if (this.$parent.getLocation) {
        this.$parent.getLocation(val)
      }
    }
  }
}
</script>
<style lang="less" scoped>
li {
  width: 100%;
  height: auto;
  .li-c {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(255, 255, 255, 1);
    height: 30px;
    padding: 0 0 0 10px;
    cursor: pointer;
    position: relative;
    .li-lt {
      flex: 1;
      display: flex;
      align-items: center;
      width: auto;
      overflow: hidden;
      .select {
        width: 16px;
        height: 16px;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 2px;
        cursor: pointer;
        transition: all 0.3s;
        position: relative;
        flex-shrink: 0;
      }
      // .select:hover {
      //   border-color: #1890ff;
      // }
      .select::after {
        position: absolute;
        top: 50%;
        left: 22%;
        display: table;
        width: 5.71428571px;
        height: 9.14285714px;
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0;
        transform: rotate(45deg) scale(0) translate(-50%, -50%);
        opacity: 0;
        transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
        content: '';
      }
      .tree-checkbox-indeterminate::after {
        top: 50%;
        left: 50%;
        width: 8px;
        height: 2px;
        background-color: #fff;
        border: 0;
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        content: ' ';
      }
      .tree-checkbox-checked,
      .tree-checkbox-indeterminate {
        background-color: #1890ff;
        border-color: #1890ff;
      }
      .tree-checkbox-checked::after {
        position: absolute;
        display: table;
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0;
        transform: rotate(45deg) scale(1) translate(-50%, -50%);
        opacity: 1;
        transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
      }
      .name {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 400;
        margin-left: 6px;
        width: calc(100% - 22px);
        em {
          font-family: PingFangSC-Regular, PingFang SC;
          white-space: nowrap;
          overflow: hidden;
          flex-shrink: 1;
          text-overflow: ellipsis;
        }
        img {
          flex-shrink: 0;
          width: 16px;
          height: 16px;
          display: block;
          margin-right: 6px;
        }
        .on-line {
          flex-shrink: 0;
          color: #6dd400;
          display: flex;
          align-items: center;
          margin-right: 5px;
          .tracking {
            width: 16px;
            height: 16px;
            cursor: pointer;
          }
        }
      }
    }
    .num {
      display: flex;
      margin-left: 4px;
      .icon {
        margin-left: 5px;
        cursor: pointer;
        padding: 4px;
        transform: rotate(0deg);
        transition: transform 0.2s;
      }
      .down {
        transform: rotate(180deg);
      }
    }
  }
  .bg {
    background: rgba(25, 144, 253, 0.65);
  }
  .li-c:hover {
    background: linear-gradient(90deg, #131c32 0%, rgba(19, 28, 50, 0) 100%);
  }
  .bg:hover {
    background: rgba(25, 144, 253, 0.65);
  }
  ul li .li-c {
    padding: 0 0 0 24px;
  }
  ul li ul li .li-c {
    padding: 0 0 0 38px;
  }
  ul li ul li ul li .li-c {
    padding: 0 0 0 52px;
  }
  ul li ul li ul li ul li .li-c {
    padding: 0 0 0 66px;
  }
  ul li ul li ul li ul li ul li .li-c {
    padding: 0 0 0 80px;
  }
}
</style>
